<template>
  <div class="materSectionSuperAnalysisDia">
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="核销单详情"
      :visible.sync="inComData.materSectionSuperAnalysisDiaStatus"
      :fullscreen="true"
      :modal="false"
      @closed="closededitDialogStatus"
      @open="openeditDialogStatus"
    >
      <div
        style="width: 70%"
        class="dialogItem"
      >
        <el-form
          :model="editForm"
          :rules="rules"
          ref="editForm"
          label-width="100px"
          style="width: 100%; margin: 0 auto"
        >
          <el-row class="mb-10">
            <el-col :span="8">
              <el-form-item label="核销单号：">
                <el-input
                  disabled
                  v-model="editForm.orderNum"
                  placeholder="核销单号自动生成"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="核销日期："
                prop="verificationDate"
              >
                <el-date-picker
                  disabled
                  style="width: 100%"
                  v-model="editForm.verificationDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  @change="changeVerificationDateHandler"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mb-10">
            <el-col :span="16">
              <el-button
                type="warning"
                @click="exportHandler"
                >批量导出</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-table
              :data="editForm.verificationSheetItems"
              style="width: 100%"
              height="685"
              class="mb-10"
              element-loading-text="Loading"
              element-loading-spinner="el-icon-loading"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              :key="Math.random()"
            >
              <el-table-column
                fixed
                type="index"
                label="序号"
                width="55"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="materialId"
                label="物料名称"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.materialName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="modelId"
                label="规格型号"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.modelName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="单位">
                <template slot-scope="scope">
                  <span>{{ scope.row.unit }}</span>
                </template>
              </el-table-column>
              <el-table-column label="开累">
                <el-table-column
                  label="进货量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.aggregatePurchase }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="耗量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.aggregateConsumption }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="已完工程量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.aggregateCompleted }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="损耗量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.aggregateWastage }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="损耗率"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{
                      !scope.row.aggregateAttritionRate
                        ? ''
                        : (scope.row.aggregateAttritionRate * 100).toFixed(2) +
                          '%'
                    }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="材料消耗量">
                <el-table-column
                  label="期初库存量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.spendingInventory }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="本期进货量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.spendingPurchase }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="本期库存"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.spendingStock }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="本期耗量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.spendingConsumption }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="施工应耗量">
                <el-table-column
                  label="已完工程量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.constructionCompleted }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="已完工程量合计"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.constructionCompletedCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="本期损耗量（节超）"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.constructionWastage }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="损耗量">
                <el-table-column
                  label="本期损耗率"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{
                      !scope.row.wastageAttritionRate
                        ? ''
                        : (scope.row.wastageAttritionRate * 100).toFixed(2) +
                          '%'
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="合同损耗率系数"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.wastageAttritionCoefficient }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="超欠耗系数"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.wastageExceedCoefficient }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="超欠耗量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.wastageExceedConsumption }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column
                label="节超"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.reduction }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.remark }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-form>
        <el-row
          type="flex"
          justify="center"
          slot="footer"
        >
          <div>
            <el-button
              v-if="editForm.permission"
              type="warning"
              @click="auditHandler('detail', editForm)"
              >审核</el-button
            >
            <el-button
              @click="inComData.materSectionSuperAnalysisDiaStatus = false"
              >返回</el-button
            >
          </div>
        </el-row>
      </div>
      <div
        style="width: calc(30% - 20px); height: 100%; margin-left: 20px"
        class="dialogItem"
      >
        <approxFlow
          ref="approxFlow"
          :steps="steps"
        ></approxFlow>
      </div>
    </el-dialog>

    <!-- 审批流 -->
    <toExamine
      ref="toExamine"
      :steps="steps"
      :approxForm="approxForm"
      :toExamineData="toExamineData"
    ></toExamine>
  </div>
</template>

<script>
import {
  getVerificationPage,
  addVerificationDraft,
  deleteVerification,
  addVerificationSheet,
  updateVerificationSheet,
  getMaterialTree,
  getMaterialDetail,
  getMaterialTypeDetail,
  getVerificationSheet,
  getVerificationSheetDetail,
  terminatePlan,
  executeTaskPlan,
  getNextNodeAssignWay,
  getVerificationSheetExport,
} from '/src/http/materialDispatch/materSectionSuperAnalysis.js'
import approxFlow from '/src/component/assembly/approxFlow.vue'
import toExamine from '/src/component/assembly/toExamine.vue'
import download from '/src/utils/downLoad.js'
import { getProcessLog, getEnableUserList } from '/src/http/commonApi.js'

export default {
  components: {
    approxFlow,
    toExamine,
  },

  data() {
    return {
      ccListStatus: false,
      manOptions: [],
      ccList: [],
      toExamineData: {
        toExamineDataStatus: false,
        isSearch: false,
      },
      approxForm: {
        approveOperation: '1',

        opinion: '发起了审批',
      },
      steps: {},

      orderNum: '',
      verificationDate: [],

      multipleSelection: [],

      editTitle: '新增',
      editDialogStatus: false,
      editForm: {
        orderNum: '',
        verificationDate: '',
        verificationSheetItems: [
          {
            rowStatus: false,
            materialId: null,
            modelId: null,
            typeOptions: [],
            unit: '',
            aggregatePurchase: undefined,
            aggregateConsumption: undefined,
            aggregateCompleted: undefined,
            aggregateWastage: undefined,
            aggregateAttritionRate: undefined,
            spendingInventory: undefined,
            spendingPurchase: undefined,
            spendingStock: undefined,
            spendingConsumption: undefined,
            constructionCompleted: undefined,
            constructionCompletedCount: undefined,
            constructionWastage: undefined,
            wastageAttritionRate: undefined,
            wastageAttritionCoefficient: undefined,
            wastageExceedCoefficient: undefined,
            wastageExceedConsumption: undefined,
            reduction: null,
            remark: '',
          },
        ],
      },
      rules: {
        orderNum: [
          {
            required: true,
            message: '请输入核销单号',
            trigger: 'change',
          },
        ],
        verificationDate: [
          {
            required: true,
            message: '请选择核销日期',
            trigger: 'change',
          },
        ],
      },
      selectRowArr: [],
      materialArrOptions: [],

      dialogVisible: false,
      projectInput: '',
      renderData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isSearch: false,

      editTitle: '',
      editDialogStatus: false,
      editProjectIdentifyInput: '',
      editProjectInput: '',
      from: {},

      detailData: {},
    }
  },
  props: {
    inComData: Object,
  },
  mounted() {},
  methods: {
    exportHandler() {
      let params = { verificationId: this.editForm.id }
      this.getVerificationSheetExportApi(params)
    },

    auditHandler(name = '', data) {
      if (name === 'detail') {
        this.detailName = 'detail'
        this.$confirm(
          `确认对"核销分析单号${data.orderNum}"发起审批吗`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            this.approxForm.opinion = ''

            getProcessLog({ id: data.orderId }).then((res) => {
              if (res.code == 200) {
                this.toExamineData.toExamineDataStatus = true
                this.steps = res.data
              } else {
                this.$message.error(res.message)
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消审核',
            })
          })
      } else {
        if (this.multipleSelection.length > 1) {
          this.$message({
            message: '审批不能选择多条',
            type: 'warning',
          })
          this.multipleSelection = []
        } else if (this.multipleSelection.length == 0) {
          this.$message({
            message: '未选择审批计划',
            type: 'warning',
          })
        } else if (this.multipleSelection[0].state === 'draft') {
          this.$message.warning('该物资核销分析为草稿，不能进行审批')
        } else if (!this.multipleSelection[0].permission) {
          if (this.multipleSelection[0].state === 'completed') {
            this.$message.warning('该物资核销分析已完成审批')
          } else if (this.multipleSelection[0].state === 'terminated') {
            this.$message.warning('该物资核销分析已结束审批')
          } else {
            this.$message.warning('无审批权限')
          }
        } else {
          this.$confirm(
            `确认对"核销分析单号${this.multipleSelection[0].orderNum}"发起审批吗`,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
              this.approxForm.opinion = ''

              getProcessLog({ id: this.multipleSelection[0].orderId }).then(
                (res) => {
                  if (res.code == 200) {
                    this.toExamineData.toExamineDataStatus = true
                    this.steps = res.data
                  } else {
                    this.$message.error(res.message)
                  }
                }
              )
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消审批',
              })
            })
        }
      }
    },

    changeVerificationDateHandler() {
      this.editForm.verificationSheetItems.forEach((item) => {
        if (item.rowStatus === false) {
          if (item.materialId !== null && item.modelId !== null) {
            this.getVerificationSheetApi(
              item.materialId[item.materialId.length - 1],
              item.modelId,
              this.editForm.verificationDate,
              item
            )
          }
        }
      })
    },

    changeMaterial(v, row) {
      if (this.editForm.verificationDate == '') {
        this.$message.error('请先选择核销日期')
        row.materialId = []
        return
      } else {
        this.getMaterialTreeApi(v[v.length - 1], row)
        row.modelId = null
      }
    },

    xzMaterial(v, row) {
      this.getMaterialDetailApi(v[v.length - 1], row)
    },

    changeModel(v, row) {
      row.typeOptions.forEach((item) => {
        if (item.id == v) {
          row.unit = item.unit
          row.modelName = item.model
        }
      })
      this.getVerificationSheetApi(
        row.materialId[row.materialId.length - 1],
        v,
        this.editForm.verificationDate,
        row
      )
    },

    getModelHandler(e, row) {
      this.getMaterialDetailApi(
        row.materialId[(row.materialId, length - 1)],
        row
      )
    },

    submitRowHandler(row) {
      if (row.materialId == null) {
        this.$message.error('请选择物料')
        return
      }
      if (row.modelId == null) {
        this.$message.error('请选择规格型号')
        return
      }
      if (
        !row.aggregateCompleted ||
        !row.constructionCompleted ||
        !row.constructionCompletedCount ||
        !row.wastageAttritionCoefficient
      ) {
        this.$message.error('请选检查表单是否填写完完整')
        return
      }
      row.rowStatus = true
      this.getVerificationSheetApi(
        row.materialId[row.materialId.length - 1],
        row.modelId,
        this.editForm.verificationDate
      )
    },

    saveDraftHandler(formName) {
      this.editForm.verificationSheetItems.forEach((item) => {
        item.rowStatus = true
      })
      setTimeout(() => {
        if (this.editTitle === '新增') {
          this.addVerificationDraftApi(this.editForm)
        } else {
          this.updateVerificationSheetApi(this.editForm)
        }
      }, 300)
    },

    submitHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editForm.verificationSheetItems.forEach((item) => {
            if (item.rowStatus === true) {
              this.ccList = []
              this.getEnableUserListApi()
              this.ccListStatus = true
            } else {
              this.$message.error('请先保存行内容')
            }
          })
        } else {
          this.$message.error('请检查输入项是否填写完整')
          return false
        }
      })
    },

    ccListSumbit() {
      let params = this.editForm
      this.startProcess(params)
    },
    closededitDialogStatus() {
      this.inComData.materSectionSuperAnalysisDiaStatus = false
    },
    openeditDialogStatus() {
      console.log('::this.inComData.data: ', this.inComData.data)
      this.seeDetail(this.inComData.data)
    },

    seeDetail(data) {
      console.log('data::: ', data)
      getVerificationSheetDetail(data.id).then((res) => {
        if (res.code == 200) {
          this.editForm = res.data
          this.editForm.verificationSheetItems.forEach((item) => {
            this.$set(item, 'rowStatus', true)

            item.aggregatePurchase = Number(item.aggregatePurchase)
            item.aggregateConsumption = Number(item.aggregateConsumption)
            item.aggregateCompleted = Number(item.aggregateCompleted)
            item.aggregateWastage = Number(item.aggregateWastage)

            item.spendingInventory = Number(item.spendingInventory)
            item.spendingPurchase = Number(item.spendingPurchase)
            item.spendingStock = Number(item.spendingStock)
            item.spendingConsumption = Number(item.spendingConsumption)

            item.constructionCompleted = Number(item.constructionCompleted)
            item.constructionCompletedCount = Number(
              item.constructionCompletedCount
            )
            item.constructionWastage = Number(item.constructionWastage)

            item.wastageExceedConsumption = Number(
              item.wastageExceedConsumption
            )

            this.getMaterialTypeDetailApi(item.materialId, item)
          })
          if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields()
          }
          this.editDialogStatus = true
        } else {
          this.$message.error(res.message)
        }
      })
      if (data.state !== 'draft') {
        getProcessLog({ id: data.orderId }).then((res) => {
          if (res.code == 200) {
            this.steps = res.data
            this.steps.state = this.editForm.state
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },

    toExamineFun() {
      console.log(':this.detailData:: ', this.detailData)
      if (Object.keys(this.detailData).length > 0) {
        console.log('1::: ', 1)
        this.startProcess(this.detailData)
      } else {
        console.log('2::: ', 2)
        this.startProcess(this.editForm)
      }
    },

    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data
        }
      })
    },

    getMaterialTreeApi(v, row) {
      getMaterialTree().then((res) => {
        if (res.code == 200) {
          this.$set(row, 'materialArrOptions', res.data)
        }
      })
    },

    async getMaterialTypeDetailApi(id, row) {
      getMaterialTypeDetail(id).then(async (res) => {
        if (res.code == 200) {
          row.materialName = res.data.name
          await this.getMaterialDetailApi(res.data.id, row)
          if (res.data.parentIds == null) {
            await this.a([res.data.pid, row.materialId], res.data.id, row)
          } else {
            await this.a(res.data.parentIds, res.data.id, row)
          }
        }
      })
    },
    async a(str, id, item) {
      await this.getMaterialTreeApi()

      if (str instanceof Array) {
        item.materialId = str
      } else {
        item.materialId = str.split(',').map(Number)
        item.materialId.shift()
        item.materialId.push(id)
      }
    },

    getMaterialDetailApi(id, item) {
      getMaterialDetail(id).then((res) => {
        if (res.code == 200) {
          item.typeOptions = res.data
        }
      })
    },

    getVerificationSheetApi(materialId, modelId, date, row) {
      getVerificationSheet(materialId, modelId, date).then((res) => {
        if (res.code == 200) {
          row.aggregatePurchase = Number(res.data.aggregatePurchase)

          row.spendingInventory = Number(res.data.spendingInventory)

          row.spendingPurchase = Number(res.data.spendingPurchase)

          row.spendingStock = Number(res.data.spendingStock)

          row.aggregateConsumption =
            Number(row.aggregatePurchase) - Number(row.spendingStock)

          row.spendingConsumption =
            row.spendingInventory + row.spendingPurchase - row.spendingStock
        }
      })
    },

    getVerificationSheetExportApi(params) {
      getVerificationSheetExport(params).then((res) => {
        download.excel(res, `物资核销分析${Date.now()}.xlsx`)
      })
    },
    /**
     * 审批
     */

    startProcess(biDto) {
      console.log('biDto::: ', biDto)
      let params = {
        state: biDto.state,
        type: 'mlVerificationSheet',
      }
      if (this.approxForm.approveOperation === '0') {
        this.terminatePlanApi(biDto.id)
      } else if (this.approxForm.approveOperation === '1') {
        getNextNodeAssignWay(params).then((res) => {
          if (res.code == 200) {
            if (!res.data) {
              this.executeTaskPlanApi(0, biDto)
            } else if (res.data.assignWay === 0 || res.data.assignWay === 2) {
              if (biDto.state == 'draft' || biDto.state == undefined) {
                this.addVerificationSheetApi(biDto)
              } else {
                this.executeTaskPlanApi(0, biDto)
              }
            } else if (res.data.assignWay === 1) {
            }
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },

    addVerificationSheetApi(params) {
      let a = {
        assignees: [],
        opinion: this.approxForm.opinion,
        ccList: this.ccList,
        biDto: params,
      }
      a.biDto.verificationSheetItems.forEach((item) => {
        item.materialId = item.materialId[item.materialId.length - 1]
      })
      addVerificationSheet(a).then((res) => {
        if (res.code == 200) {
          this.$message.success('新增物资核销分析并成功发起审批')
          this.ccListStatus = false
          this.editDialogStatus = false
          this.pageNum = 1
        } else {
          this.$message.error(res.message)
        }
      })
    },

    getVerificationSheetDetailApi(data) {
      getVerificationSheetDetail(data.id).then((res) => {
        if (res.code == 200) {
          this.editForm = res.data
          this.editForm.verificationSheetItems.forEach((item) => {
            this.$set(item, 'rowStatus', true)

            item.aggregatePurchase = Number(item.aggregatePurchase)
            item.aggregateConsumption = Number(item.aggregateConsumption)
            item.aggregateCompleted = Number(item.aggregateCompleted)
            item.aggregateWastage = Number(item.aggregateWastage)

            item.spendingInventory = Number(item.spendingInventory)
            item.spendingPurchase = Number(item.spendingPurchase)
            item.spendingStock = Number(item.spendingStock)
            item.spendingConsumption = Number(item.spendingConsumption)

            item.constructionCompleted = Number(item.constructionCompleted)
            item.constructionCompletedCount = Number(
              item.constructionCompletedCount
            )
            item.constructionWastage = Number(item.constructionWastage)

            item.wastageExceedConsumption = Number(
              item.wastageExceedConsumption
            )

            this.getMaterialTypeDetailApi(item.materialId, item)
          })
          if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields()
          }
          this.editDialogStatus = true
        } else {
          this.$message.error(res.message)
        }
      })
      if (data.state !== 'draft') {
        getProcessLog({ id: data.orderId }).then((res) => {
          if (res.code == 200) {
            this.steps = res.data
            this.steps.state = this.editForm.state
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },

    getNextNodeAssignWayApi(state = '', type = 'mlVerificationSheet') {
      let params = {
        state,
        type,
      }
      getNextNodeAssignWay(params).then((res) => {
        if (res.code == 200) {
          this.editForm.assignees = res.data.assignees
          this.editForm.ccList = res.data.ccList
        } else {
          this.$message.error(res.message)
        }
      })
    },

    terminatePlanApi(id) {
      terminatePlan(id).then((res) => {
        if (res.code == 200) {
          this.$message.success('终止成功')
          this.toExamineData.toExamineDataStatus = false
          this.inComData.materSectionSuperAnalysisDiaStatus = false
          this.detailData = {}
          this.$parent.workbenchTaskCountyApi()
          this.$parent.shuaxin()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    executeTaskPlanApi(type, biDto) {
      console.log('biDto::: ', biDto)
      if (type == 0) {
        let params = {
          assignees: [],
          opinion: this.approxForm.opinion,
          ccList: this.ccList,
          biDto,
        }

        params.biDto.verificationSheetItems.forEach((item) => {
          if (item.materialId && item.materialId.length > 0) {
            item.materialId = item.materialId[item.materialId.length - 1]
          }
        })
        executeTaskPlan(params).then((res) => {
          if (res.code == 200) {
            this.$message.success('审核成功')
            this.toExamineData.toExamineDataStatus = false
            this.inComData.materSectionSuperAnalysisDiaStatus = false
            this.detailData = {}
            this.$parent.workbenchTaskCountyApi()
            this.$parent.shuaxin()
          } else {
            this.$message.error(res.message)
            this.detailData = {}
          }
        })
      } else {
        this.toExamineData.toExamineDataStatus = false
        this.inComData.materSectionSuperAnalysisDiaStatus = false
        this.terminatePlanApi(biDto.id)
      }
    },
    toExamineDataClean() {
      this.toExamineData = {
        toExamineDataStatus: false,
        isSearch: false,
      }
      this.approxForm = {
        approveOperation: '1',

        opinion: '',
      }
    },
  },
}
</script>

<style lang="less" scoped>
#materSectionSuperAnalysis {
  width: 95%;
  margin: 0 auto;
  margin-top: 1rem;
}
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}

.dialogItem {
  float: left;
}
:deep(.el-input.is-disabled .el-input__inner) {
  color: #606266;
  background-color: #eceaea;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #606266;
  background-color: #fcfcfc;
}
</style>
